ul.nav, ul.nav ul.sub-menu {
    padding:0;
    margin: 0;
}
ul.nav li, ul.nav ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}

ul.nav ul.sub-menu li {
    width: 150px;
    text-align: left;
    padding-left: 10px;
}

/*Link Appearance*/
ul.nav li a, ul.nav li ul.sub-menu li a {
    text-decoration: none;
    color: #fff;
    
    
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul.nav li {
    position: relative;
}
/*sub menu*/
ul.nav li ul.sub-menu {
    display:none;
    
    box-shadow:0 1px 1px 0 rgba(0, 0, 0, 0.2) !important;
    border-top: none;
    position: absolute;
    top: 50px;
    left: 0;
    text-align:center;
    z-index:3;
    min-width:60px;
    overflow:hidden;
    background: #2BA6CB;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
    
}

ul.nav li:hover ul.sub-menu {
    display:block;
    
}
ul.nav li:hover ul.sub-menu li{
    
}
ul.nav li ul.sub-menu li > a {
    
}
ul.nav li ul.sub-menu li a:hover{
    color: #B8E9F0;
    
}


/* styles for desktop */

.tinynav { display: none }

@media screen and (max-width: 480px) {
	/* max 480 */
#socialmedia img {margin: 12% 8% 0 0;float: left;max-width: 25%;}
.searchbutton {font-size: 90%; width: 22%;}
#search .search {width: 72%;}
.footer_contact .call {width: 100%;}.footer_contact .email {width: 100%;margin: 4% 0 0 0;}
#logo {
	width: 60%;
	height: 60px;
	margin-top: 15px;
	float: left;
}
#logo img {max-width: 100%;}
header { height: 160px !important; }
#socialmedia { display: none;}
#respon_socialmedia { 
	display: block; 
	float: right;
	width: 40%;
	margin-top: 30px;
}

#respon_socialmedia img { float: right; margin-left: 10px; }

#search {
	width: 100%;
	margin-top: 10px;
}

#topnav {
	width: 100%;
	padding: 0px;
	height: 40px;
	border-bottom: 4px solid #d6d6d6;
	background: #2ba6cb;
}


#topnav nav { width: 89%; }
#topnav nav a {
	font-size: 90%;
	min-height: 40px;
	padding: 0px 2%;
}

#headernav a {border-bottom: 1px solid #d9d9d9;font-size: 80%;}

#headernav {
	width: 100%;
}

.post .readmore {font-size: 70%;}
.post .date,.post .author{width:100%; float: none;}
.post .author {text-align: left; margin-top: 5px;}
#wrap {
	width: 96%;
	padding: 2%;
}

#content {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	border: none;
}

.post {width: 100%; }
.post .title {
	margin: 10px 0px;
	padding-bottom: 10px;
}

.post .title a {font-size: 18px;}
.post .excerpt {
	font-size: 12px;
}

.post .readmore {
	width: 96%;
	padding: 2%;
	margin: 4% 0 0 2%;
	font-size: 14px;
	border-left: none;
}

.pagination {
	width: 100%;
	padding: 0px;
	overflow: hidden;
}

.pagination a {
	margin-right: 7%;
}

.pagination a:last-of-type {margin-right: 0px;}
.pagination .next { float: right; }
#sidebar {
	width: 100%;
	height: auto;
	margin-top: 35px;
}

.widget {
	width: 100%;
	height: auto;
	overflow: hidden;
	margin-right: 3%;
	margin-bottom: 20px;
}

.widget:last-of-type {margin-right: 0px;}

.widget li:hover {
	padding: 15px 0 15px 0px;
	width: 100%;
	border-bottom: 1px solid #d9d9d9;
}


footer {
	border-top: 5px solid #373d40;
	margin-top: 0px;
}


.footer_item {
	width: 96%;
	height: auto;
	margin-bottom: 15px;
	margin-left: 2%;
}


.footer_logo { display: none; }


#footer_center {
	width: 100%;
	margin: 0px;
}

#commentsform textarea {
	width: 98%;
	height: 119px;
	border: 1px solid #ccc;
	float: none;
	margin-top: 10px;
}

#commentsform .fields {
	width: 98%;
	margin-left: 0%;
	margin-top: 10px;
	float: none;
}
	
}

@media screen and (min-width: 481px) and (max-width: 767px) {
	/* 481px > 767px */
#socialmedia img {margin: 12% 8% 0 0;float: left;max-width: 25%;}
.searchbutton {font-size: 90%;}
#search .search {width: 78.5%;}
.footer_contact .call {width: 100%;}.footer_contact .email {width: 100%;margin: 4% 0 0 0;}
#logo {
	width: 20%;
	height: 60px;
	margin-top: 20px;
	float: left;
}
header { height: 193px !important; }
#socialmedia { display: none;}
#respon_socialmedia { 
	display: block; 
	float: right;
	width: 51%;
	margin-top: 40px;
}

#respon_socialmedia img { float: right; margin-left: 10px; }

#search {
	width: 100%;
	margin: 25px auto;
}

#topnav nav a { font-size: 110%; }

.post .readmore {font-size: 70%;}
.post .author {width: 40%;}
.post .date{width:60%}

#content {
	width: 100%;
	height: auto;
	display: block;
	padding: 0px;
	border: none;
}

.post {width: 100%; }

.pagination {
	width: 45%;
	margin: 0px auto;
	padding: 0px;
}

.pagination a {
	margin-right: 1.5%;
}

#sidebar {
	width: 100%;
	height: auto;
	margin-top: 35px;
}

.widget {
	width: 30%;
	height: auto;
	overflow: hidden;
	float: left;
	margin-right: 3%;
	margin-bottom: 20px;
}

.widget:last-of-type {margin-right: 0px;}

.widget li:hover {
	padding: 15px 0 15px 0px;
	width: 100%;
	border-bottom: 1px solid #d9d9d9;
}


}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	/* 549px > 1024px */
#socialmedia img {margin: 12% 8% 0 0;float: left;max-width: 25%;}
.searchbutton {font-size: 75%;padding: 3% 0;}
.post .readmore {font-size: 70%;}
.post .author {width: 40%;}
.post .date{width:60%}
.footer_contact .call {width: 100%;}.footer_contact .email {width: 100%;margin: 4% 0 0 0;}
}


@media screen and (max-width: 600px) {
    .tinynav { display: block; margin: 0 auto;margin-top:12px;}
    .navbar .nav { display: none !important }
}

